stimulus-use

A collection of composable behaviors for your Stimulus Controllers

• New lifecycle behaviors: adds new standard behaviors to your Stimulus controllers.
• Composable: compose at will different behaviors in a single controller.
• Modular: built as ES6 modules, just import what you need and tree shaking will remove the rest.
• Typscript: Types available, better autocompletion.
• Tiny: 1k gzip
• MIT Licensed: free for personal and commercial use.

Getting Started

npm

npm i stimulus-use

yarn

yarn add stimulus-use

Modules and Controllers

Sets of controllers arround the Observer APIs

• Observers

  • useIntersection, IntersectionController — tracks the element's intersection and adds appear, disapear callbacks to your controller.
  • useResize, ResizeController — tracks the element's size and adds a new lifecyle callback 'resized'.

• Application

  • useApplication, ApplicationController — supercharged controller for your application.

Extend or compose

Stimulus use can be used in two maners: extending or composing

Extending

You can create your stimulus from a pre-build Stimulus-use controller that offers the new behavior you are looking for. This method is perfectly suited when you only need a single behavior for your controller

import { IntersectionController } from 'stimulus-use'

export default class extends IntersectionController {
  appear(entry) {
    // triggered when the element appears within the viewport
  }
}

Composing

When you need multiple behaviors or you are already extending your controller from another one. You can easily add new behavior with the use functions.

import { Controller } from 'stimulus'
import { useIntersection, useResize } from 'stimulus-use'

export default class extends Controller {
  connect() {
    useIntersection(this)
    useResize(this)
  }

  appear(entry) {
    // triggered when the element appears within the viewport
  }

  resized({ height, width }) {
    // trigered when the element is resized
  }
}